<header class="navbar" th:classappend="${!theme.config.basic_info.header_fixed}? 'animation' : 'fixed'"
        xmlns:th="https://www.thymeleaf.org">
    <div class="navbar-above" th:classappend="${!theme.config.basic_info.header_fixed}? 'animation'">
        <div th:class="${theme.config.basic_style.sidebar_column != 'all' ? 'container two-column' : 'container' }">
            <i class="ri-list-unordered navbar-slideicon"></i>
            <a class="navbar-item logo-title" href="/" th:aria-label="${site.title}" th:title="${site.title}">
                <th:block th:if="${#strings.isEmpty(site.logo)}" th:text="${site.title}"/>
                <th:block th:unless="${#strings.isEmpty(site.logo)}">
                    <img class="logo-img" th:src="${site.logo}" th:alt="${site.title}" height="28" width="auto">
                    <img class="logo-img-dark"
                         th:src="${#strings.defaultString(theme.config.basic_info.night_logo, site.logo)}"
                         th:alt="${site.title}" height="28" width="auto">
                </th:block>
            </a>
            <nav class="navbar-nav active-animate"
                 th:classappend="${theme.config.basic_info.menu_center ? 'menu-center' : ''}">
                <th:block th:each="menuItem : ${menuFinder.getPrimary().menuItems}">
                    <a th:if="${#lists.isEmpty(menuItem.children)}"
                       class="item"
                       th:data-not-pjax="${#annotations.getOrDefault(menuItem, 'disable_pjax', false)} ? 'true'"
                       th:href="${menuItem.status.href}"
                       th:aria-label="${menuItem.status.displayName}"
                       th:target="${menuItem.spec.target?.value}"
                       th:with="desc = ${#annotations.getOrDefault(menuItem, 'desc', menuItem.status.displayName)}"
                       th:title="${#strings.isEmpty(desc) ? menuItem.status.displayName : desc}">
                        <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(menuItem, 'icon', ''))}"
                           th:class="${'m-icon ' + #annotations.getOrDefault(menuItem, 'icon', '')}"></i>
                        [[${menuItem.status.displayName}]]
                    </a>
                    <div th:unless="${#lists.isEmpty(menuItem.children)}" class="item-dropdown" trigger="hover"
                         placement="60px">
                        <div class="item-dropdown-link">
                            <a class="item"
                               th:href="${#strings.defaultString(menuItem.status.href, 'javascript:')}"
                               th:target="${menuItem.spec.target?.value}"
                               th:data-not-pjax="${#annotations.getOrDefault(menuItem, 'disable_pjax', false)} ? 'true'"
                               th:aria-label="${menuItem.status.displayName}"
                               th:with="desc = ${#annotations.getOrDefault(menuItem, 'desc', menuItem.status.displayName)}"
                               th:title="${#strings.isEmpty(desc) ? menuItem.status.displayName : desc}">
                                <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(menuItem, 'icon', ''))}"
                                   th:class="${'m-icon ' + #annotations.getOrDefault(menuItem, 'icon', '')}"></i>
                                [[${menuItem.status.displayName}]]
                            </a>
                            <i class="ri-arrow-down-s-line item-dropdown-link-icon" style="color:var(--main)"></i>
                        </div>
                        <nav class="item-dropdown-menu">
                            <li th:each="dropdown : ${menuItem.children}" class="item-sub-li">
                                <a class="item"
                                   th:href="${#strings.defaultString(dropdown.status.href, 'javascript:')}"
                                   th:data-not-pjax="${#annotations.getOrDefault(dropdown, 'disable_pjax', false)} ? 'true'"
                                   th:target="${dropdown.spec.target?.value}"
                                   th:aria-label="${dropdown.status.displayName}"
                                   th:with="desc = ${#annotations.getOrDefault(dropdown, 'desc', dropdown.status.displayName)}"
                                   th:title="${#strings.isEmpty(desc) ? dropdown.status.displayName : desc}">
                                    <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(dropdown, 'icon', ''))}"
                                       th:class="${'m-icon ' + #annotations.getOrDefault(dropdown, 'icon', '')}"></i>
                                    [[${dropdown.status.displayName}]]
                                </a>
                                <ol class="item-sub" th:if="${!#lists.isEmpty(dropdown.children)}">
                                    <li th:each="dropdownChild : ${dropdown.children}">
                                        <a class="item"
                                           th:data-not-pjax="${#annotations.getOrDefault(dropdownChild, 'disable_pjax', false)} ? 'true'"
                                           th:href="${dropdownChild.status.href}"
                                           th:target="${dropdownChild.spec.target?.value}"
                                           th:aria-label="${dropdownChild.status.displayName}"
                                           th:with="desc = ${#annotations.getOrDefault(dropdownChild, 'desc', dropdownChild.status.displayName)}"
                                           th:title="${#strings.isEmpty(desc) ? dropdownChild.status.displayName : desc}">
                                            <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(dropdownChild, 'icon', ''))}"
                                               th:class="${'m-icon ' + #annotations.getOrDefault(dropdownChild, 'icon', '')}"></i>
                                            [[${dropdownChild.status.displayName}]]
                                        </a>
                                    </li>
                                </ol>
                            </li>
                        </nav>
                    </div>
                </th:block>
            </nav>
            <div th:if="${pluginFinder.available('PluginSearchWidget')}" class="navbar-search">
                <button th:if="${theme.config.page_config.search.search_style == 'basic'}"
                        onclick="javascript:SearchWidget.open();" class="submit" th:aria-label="#{common.navbar.search.button}" th:title="#{common.navbar.search.title}"
                        style="border-radius: 17px;"><i class="ri-search-line"></i></button>
                <a th:if="${theme.config.page_config.search.search_style == 'form'}" target="_self" href="/search"
                   class="submit" th:aria-label="#{common.navbar.search.button}" th:title="#{common.navbar.search.button}"
                   style="border-radius: 17px;display: flex;align-items: center;justify-content: center;"><i
                        class="ri-search-line"></i></a>
                <form data-pjax class="navbar-search" method="get" action="/search"
                      th:if="${theme.config.page_config.search.search_style == 'box'}">
                    <input id="box-search-content-input" autocomplete="off" th:placeholder="#{common.navbar.search.placeholder}" name="keyword"
                           value="" class="input" type="text"/>
                    <button type="submit" class="submit" th:aria-label="#{common.navbar.search.button}" th:title="#{common.navbar.search.button}"><i class="ri-search-line"></i>
                    </button>
                    <span class="icon"></span>
                    <nav class="result"
                         th:with="searchPosts = ${postFinder.list({page: 1,size: 5,sort: {'stats.visit,desc'}})}">
                        <a th:each="postData,pIndex : ${searchPosts}" th:href="@{${postData.status.permalink}}"
                           th:aria-label="${postData.spec.title}"
                           th:title="${postData.spec.title}"
                           th:target="${theme.config.page_config.search.search_target}"
                           class="item">
                            <span class="sort">[[${pIndex.count}]]</span>
                            <span class="text">[[${postData.spec.title}]]</span>
                        </a>
                    </nav>
                </form>
            </div>
            <i th:if="${theme.config.page_config.search.search_style == 'basic'}"
               class="ri-search-line navbar-searchicon" onclick="javascript:SearchWidget.open();"></i>
            <a th:if="${theme.config.page_config.search.search_style == 'form' || theme.config.page_config.search.search_style == 'box'}"
               target="_self" href="/search" class="submit navbar-searchicon" th:aria-label="#{common.navbar.search.button}" th:title="#{common.navbar.search.button}"><i
                    class="ri-search-line"></i></a>
            <a data-not-pjax th:if="${theme.config.basic_style.show_console == 'console'}" class="navbar-console"
               th:href="${!#strings.isEmpty(logonUserName) ? theme.config.basic_style.console.console_logon_url : theme.config.basic_style.console.console_url}"
               th:target="${!#strings.isEmpty(logonUserName) ? theme.config.basic_style.console.console_logon_target : theme.config.basic_style.console.console_target}"
               th:title="${theme.config.basic_style.console.console_title}"
               th:aria-label="${theme.config.basic_style.console.console_title}">
                <i th:class="${#strings.defaultString(theme.config.basic_style.console.console_icon, 'ri-equalizer-line')}"></i>
            </a>
            <div th:if="${theme.config.basic_style.show_console == 'logon'}" class="navbar-logon" trigger="hover"
                 th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}">
                <div class="navbar-logon-head">
                    <img width="100%" height="100%" th:src="${currentUser.avatar ?: #theme.assets('/img/avatar.svg')}"
                         th:alt="${currentUser.displayName}"
                    />
                </div>
                <ul class="navbar-logon-group">
                    <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                        <a href="/console/posts/editor" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.new_post}"
                           th:title="#{common.navbar.logon.new_post}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_post_class)}"
                                th:class="${theme.config.basic_style.logon.console_post_class}"></i>[[#{common.navbar.logon.new_post}]]</a>
                    </li>
                    <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                        <a href="/console/single-pages/editor" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.new_single}"
                           th:title="#{common.navbar.logon.new_single}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_single_pages_class)}"
                                th:class="${theme.config.basic_style.logon.console_single_pages_class}"></i>[[#{common.navbar.logon.new_single}]]</a>
                    </li>
                    <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                        <a href="/console/moments" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.moments}" th:title="#{common.navbar.logon.moments}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_moment_class)}"
                                th:class="${theme.config.basic_style.logon.console_moment_class}"></i>[[#{common.navbar.logon.moments}]]</a>
                    </li>
                    <li th:if="${!#strings.isEmpty(logonUserName)}" class="navbar-logon-group-menu">
                        <a href="/uc" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.uc}" th:title="#{common.navbar.logon.uc}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_person_class)}"
                                th:class="${theme.config.basic_style.logon.console_person_class}"></i>[[#{common.navbar.logon.uc}]]</a>
                    </li>
                    <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                        <a href="/console" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.console}" th:title="#{common.navbar.logon.console}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_manage_class)}"
                                th:class="${theme.config.basic_style.logon.console_manage_class}"></i>[[#{common.navbar.logon.console}]]</a>
                    </li>
                    <li th:if="${!#strings.isEmpty(logonUserName)}" class="navbar-logon-group-menu">
                        <a href="/logout" data-not-pjax
                           onclick="this.href = '/logout?redirect_uri=' + encodeURIComponent(window.location.href)"
                           th:aria-label="#{common.navbar.logon.logout}" th:title="#{common.navbar.logon.logout}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_logout_class)}"
                                th:class="${theme.config.basic_style.logon.console_logout_class}"></i>[[#{common.navbar.logon.logout}]]</a>
                    </li>
                    <li th:if="${#strings.isEmpty(logonUserName)}" class="navbar-logon-group-menu">
                        <a href="/login" data-not-pjax
                           onclick="this.href = '/login?redirect_uri=' + encodeURIComponent(window.location.href)"
                           th:aria-label="#{common.navbar.logon.login}" th:title="#{common.navbar.logon.login}"><i
                                th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_login_class)}"
                                th:class="${theme.config.basic_style.logon.console_login_class}"></i>[[#{common.navbar.logon.login}]]</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="navbar-slideout">
        <div class="navbar-slideout-wrap">
            <div class="navbar-slideout-author">
                <img width="50" height="50" th:src="${contributor.avatar}" th:alt="${contributor.displayName}"
                     class="avatar"/>
                <div class="info">
                    <p class="link" th:text="${contributor.displayName}"></p>
                    <p class="motto" th:text="${contributor.bio}"></p>
                </div>
            </div>
            <ul class="navbar-slideout-menu" th:if="${!#lists.isEmpty(theme.config.sidebar.custom_stats)}">
                <li class="item" th:each="itemData,sindex :${theme.config.sidebar.custom_stats}"
                    th:switch="${itemData}">
                    <div th:case="visit" th:with="html='&lt;strong&gt;'  + ${stats.visit} + '&lt;/strong&gt;',
                            finalMessage=${#messages.msg('common.navbar.stats.visit', html)}">
                        <i class="ri-pie-chart-line"></i>
                        <span>[(${finalMessage})]</span>
                    </div>
                    <div th:case="upvote" th:with="html='&lt;strong&gt;'  + ${stats.upvote} + '&lt;/strong&gt;',
                            finalMessage=${#messages.msg('common.navbar.stats.upvote', html)}">
                        <i class="ri-thumb-up-line"></i>
                        <span>[(${finalMessage})]</span>
                    </div>
                    <div th:case="comment" th:with="html='&lt;strong&gt;'  + ${stats.comment} + '&lt;/strong&gt;',
                            finalMessage=${#messages.msg('common.navbar.stats.comment', html)}">
                        <i class="ri-message-2-line"></i>
                        <span>[(${finalMessage})]</span>
                    </div>
                    <div th:case="category" th:with="html='&lt;strong&gt;'  + ${stats.category} + '&lt;/strong&gt;',
                            finalMessage=${#messages.msg('common.navbar.stats.category', html)}">
                        <i class="ri-apps-line"></i>
                        <span>[(${finalMessage})]</span>
                    </div>
                    <div th:case="tag" th:with="tagsList = ${tagFinder.listAll()}, tags = ${#lists.size(tagsList)},
                            html='&lt;strong&gt;'  + ${tags} + '&lt;/strong&gt;',
                            finalMessage=${#messages.msg('common.navbar.stats.tag', html)}">
                        <i class="ri-price-tag-2-line"></i>
                        <span>[(${finalMessage})]</span>
                    </div>
                    <div th:case="*" th:with="html='&lt;strong&gt;'  + ${stats.post} + '&lt;/strong&gt;',
                            finalMessage=${#messages.msg('common.navbar.stats.post', html)}">
                        <i class="ri-edit-circle-line"></i>
                        <span>[(${finalMessage})]</span>
                    </div>
                </li>
            </ul>
            <ul class="navbar-slideout-menu not-toc">
                <li>
                    <div class="link panel">
                        <span>[[#{common.navbar.navigation.title}]]</span>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                    <ul class="slides panel-body panel-side-menu">
                        <li th:each="menuItem : ${menuFinder.getPrimary().menuItems}">
                            <a class="link"
                               th:data-not-pjax="${#annotations.getOrDefault(menuItem, 'disable_pjax', false)} ? 'true'"
                               th:if="${#lists.isEmpty(menuItem.children)}"
                               th:aria-label="${menuItem.status.displayName}"
                               th:href="${menuItem.status.href}"
                               th:title="${menuItem.status.displayName}"
                               th:text="${menuItem.status.displayName}"></a>
                            <th:block th:unless="${#lists.isEmpty(menuItem.children)}">
                                <div class="link panel">
                                    <a th:href="${menuItem.status.href}"
                                       th:data-not-pjax="${#annotations.getOrDefault(menuItem, 'disable_pjax', false)} ? 'true'"
                                       th:title="${menuItem.status.displayName}"
                                       th:aria-label="${menuItem.status.displayName}"
                                       th:text="${menuItem.status.displayName}"></a>
                                    <i class="ri-arrow-right-s-line"></i>
                                </div>
                                <ul class="slides panel-body">
                                    <li th:each="dropdown : ${menuItem.children}">
                                        <a class="link"
                                           th:if="${#lists.isEmpty(dropdown.children)}"
                                           th:data-not-pjax="${#annotations.getOrDefault(dropdown, 'disable_pjax', false)} ? 'true'"
                                           th:href="${dropdown.status.href}"
                                           th:aria-label="${dropdown.status.displayName}"
                                           th:title="${dropdown.status.displayName}"
                                           th:text="${dropdown.status.displayName}"></a>
                                        <th:block th:unless="${#lists.isEmpty(dropdown.children)}">
                                            <div class="link panel">
                                                <a th:href="${dropdown.status.href}"
                                                   th:data-not-pjax="${#annotations.getOrDefault(dropdown, 'disable_pjax', false)} ? 'true'"
                                                   th:title="${dropdown.status.displayName}"
                                                   th:aria-label="${dropdown.status.displayName}"
                                                   th:text="${dropdown.status.displayName}"></a>
                                                <i class="ri-arrow-right-s-line"></i>
                                            </div>
                                            <ul class="slides panel-body">
                                                <li th:each="dropdownChild : ${dropdown.children}">
                                                    <a class="link"
                                                       th:data-not-pjax="${#annotations.getOrDefault(dropdownChild, 'disable_pjax', false)} ? 'true'"
                                                       th:href="${dropdownChild.status.href}"
                                                       th:title="${dropdownChild.status.displayName}"
                                                       th:aria-label="${dropdownChild.status.displayName}"
                                                       th:text="${dropdownChild.status.displayName}"></a>
                                                </li>
                                            </ul>
                                        </th:block>
                                    </li>
                                </ul>
                            </th:block>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul th:if="${theme.config.basic_style.drawer_toc}" class="navbar-slideout-menu is-toc">
                <a class="link in" href="#" rel="nofollow" th:aria-label="#{common.navbar.toc.title}" th:title="#{common.navbar.toc.title}"><span>[[#{common.navbar.toc.title}]]</span></a>
                <div class="toc-content">
                </div>
            </ul>
            <ul th:if="${theme.config.basic_style.show_console == 'console' && theme.config.basic_style.show_mobile_console}" class="navbar-slideout-menu">
                <a data-not-pjax class="navbar-console"
                   th:href="${!#strings.isEmpty(logonUserName) ? theme.config.basic_style.console.console_logon_url : theme.config.basic_style.console.console_url}"
                   th:target="${!#strings.isEmpty(logonUserName) ? theme.config.basic_style.console.console_logon_target : theme.config.basic_style.console.console_target}"
                   th:title="${theme.config.basic_style.console.console_title}"
                   th:aria-label="${theme.config.basic_style.console.console_title}">
                    <i th:class="${#strings.defaultString(theme.config.basic_style.console.console_icon, 'ri-equalizer-line')}"></i>
                    <span style="margin-left: 5px;" th:text="${theme.config.basic_style.console.console_title}"></span>
                </a>
            </ul>
            <ul class="navbar-slideout-menu" th:if="${theme.config.basic_style.show_console == 'logon' && theme.config.basic_style.show_mobile_console}">
                <li>
                    <div class="link panel"
                         th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}">
                        <div style="display: flex;align-items: center;">
                            <img width="20px" height="20px" th:src="${currentUser.avatar ?: #theme.assets('/img/avatar.svg')}"
                                 th:alt="${currentUser.displayName}"
                            />
                            <span style="margin-left: 5px;" th:with="anonymous = #{common.navbar.logon.anonymous}">[[${!#strings.isEmpty(logonUserName) ? currentUser.displayName : anonymous}]]</span>
                        </div>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                    <ul class="slides panel-body panel-side-menu">
                        <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                            <a href="/console/posts/editor" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.new_post}"
                               th:title="#{common.navbar.logon.new_post}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_post_class)}"
                                    th:class="${theme.config.basic_style.logon.console_post_class}"></i>[[#{common.navbar.logon.new_post}]]</a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                            <a href="/console/single-pages/editor" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.new_single}"
                               th:title="#{common.navbar.logon.new_single}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_single_pages_class)}"
                                    th:class="${theme.config.basic_style.logon.console_single_pages_class}"></i>[[#{common.navbar.logon.new_single}]]</a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                            <a href="/console/moments" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.moments}"
                               th:title="#{common.navbar.logon.moments}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_moment_class)}"
                                    th:class="${theme.config.basic_style.logon.console_moment_class}"></i>[[#{common.navbar.logon.moments}]]</a>
                        </li>
                        <li th:if="${!#strings.isEmpty(logonUserName)}" class="navbar-logon-group-menu">
                            <a href="/uc" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.uc}"
                               th:title="#{common.navbar.logon.uc}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_person_class)}"
                                    th:class="${theme.config.basic_style.logon.console_person_class}"></i>[[#{common.navbar.logon.uc}]]</a>
                        </li>
                        <li sec:authorize="hasRole('ROLE_super-role')" class="navbar-logon-group-menu">
                            <a href="/console" data-not-pjax target="_blank" th:aria-label="#{common.navbar.logon.console}"
                               th:title="#{common.navbar.logon.console}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_manage_class)}"
                                    th:class="${theme.config.basic_style.logon.console_manage_class}"></i>[[#{common.navbar.logon.console}]]</a>
                        </li>
                        <li th:if="${!#strings.isEmpty(logonUserName)}" class="navbar-logon-group-menu">
                            <a href="/logout" data-not-pjax
                               onclick="this.href = '/logout?redirect_uri=' + encodeURIComponent(window.location.href)"
                               th:aria-label="#{common.navbar.logon.logout}"
                               th:title="#{common.navbar.logon.logout}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_logout_class)}"
                                    th:class="${theme.config.basic_style.logon.console_logout_class}"></i>[[#{common.navbar.logon.logout}]]</a>
                        </li>
                        <li th:if="${#strings.isEmpty(logonUserName)}" class="navbar-logon-group-menu">
                            <a href="/login" data-not-pjax
                               onclick="this.href = '/login?redirect_uri=' + encodeURIComponent(window.location.href)"
                               th:aria-label="#{common.navbar.logon.login}"
                               th:title="#{common.navbar.logon.login}"><i
                                    th:if="${!#strings.isEmpty(theme.config.basic_style.logon.console_login_class)}"
                                    th:class="${theme.config.basic_style.logon.console_login_class}"></i>[[#{common.navbar.logon.login}]]</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div class="navbar-mask"></div>
</header>
